html body {
    margin: 0;
    padding: 0;
    background-color: #93c7d0;
    font-family: Helvetica, sans-serif;
  }
  .container {
    min-width: 100vw;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .page {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
      width: 375px;
      height: 812px;
      box-shadow: 60px 60px 800px 0 rgba(0, 0, 0, 0.5);
      border-radius: 36px;
      background: #e3e6ec;
      background-image: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      );
      .top {
        width: 375px;
        height: 568px;
        background-image: linear-gradient(
          0deg,
          rgba(67, 216, 205, 0.01) 2%,
          rgba(47, 185, 202, 0.3) 100%
        );
        .title {
          padding: 40px 36px 0 36px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            display: flex;
            flex-direction: column;
            .text {
              color: rgba(0, 0, 0, 0.87);
              font-weight: bold;
              font-size: 18px;
              letter-spacing: 0.54px;
              line-height: 18px;
            }
            .sub {
              display: flex;
              margin-top: 5px;
              .flag {
                position: relative;
                .ellipse {
                  position: absolute;
                }
                .ellipse1 {
                  width: 14px;
                  height: 14px;
                  border-radius: 7px;
                  background: #2fb9ca;
                  opacity: 0.2;
                }
                .ellipse2 {
                  width: 14px;
                  height: 14px;
                  box-sizing: border-box;
                  border-radius: 7px;
                  border: 1px solid #2fb9ca;
                }
                .ellipse3 {
                  width: 6px;
                  top: 4px;
                  left: 4px;
                  height: 6px;
                  opacity: 0.6;
                  box-sizing: border-box;
                  border-radius: 3px;
                  background: #2fb9ca;
                }
                .ellipse4 {
                  width: 6px;
                  top: 4px;
                  left: 4px;
                  height: 6px;
                  box-sizing: border-box;
                  border-radius: 3px;
                  background: #2fb9ca;
                }
              }
              .subtext {
                margin-left: 20px;
                color: #959eb0;
                font-size: 12px;
                letter-spacing: 0.6px;
                line-height: 12px;
              }
            }
          }
          .iconfont {
            font-size: 36px;
          }
        }
        .treat-time-container {
          margin-top: 80px;
          .treat-time {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .inner-circle {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              position: absolute;
              width: 180px;
              height: 180px;
              border-radius: 90px;
              background: #e3e6ec;
              background-image: linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(255, 255, 255, 0) 100%
              );
              box-shadow: -10px -10px 30px 0 #ffffff,
                10px 10px 30px 0 rgba(48, 161, 178, 0.4),
                inset 1px 1px 0 0 #ffffff;
              .treat-title {
                font-size: 12px;
                color: #000000;
                letter-spacing: 0.6px;
                text-align: center;
                line-height: 12px;
                margin-bottom: 6px;
              }
              .time {
                font-size: 36px;
                color: #000000;
                letter-spacing: 1.2px;
                text-align: center;
                line-height: 36px;
              }
            }
            .circle1 {
              transform: rotateZ(60deg);
              width: 250px;
              height: 250px;
              // background: rgba(240,243,249,0.20);
              // background: conic-gradient(#2EB7C9 -120deg,#43D8CD -240deg);
              background: conic-gradient(
                rgba(0, 0, 0, 0) 0,
                rgba(0, 0, 0, 0) 30%,
                #2eb7c9 -240deg,
                #43d8cd 70%,
                #43d8cd 100%
              );
              border-radius: 125px;
            }
            .circle2 {
              width: 250px;
              height: 250px;
              position: absolute;
              border-radius: 125px;
              background: rgba(46, 183, 201, 0.7);
              opacity: 0.1;
            }
            .circle3 {
              position: absolute;
              width: 270px;
              height: 270px;
              border-radius: 135px;
              border: 1px solid rgba(46, 183, 201, 0.6);
            }
            .circle4 {
              position: absolute;
              width: 270px;
              height: 270px;
              border-radius: 135px;
              border: 1px solid rgba(46, 183, 201, 0.5);
            }
            .circle5 {
              position: absolute;
              width: 290px;
              height: 290px;
              border-radius: 145px;
              border: 1px solid rgba(46, 183, 201, 0.4);
            }
            .circle6 {
              position: absolute;
              width: 310px;
              height: 310px;
              border-radius: 155px;
              border: 1px solid rgba(46, 183, 201, 0.3);
            }
            .circle7 {
              position: absolute;
              width: 330px;
              height: 330px;
              border-radius: 165px;
              border: 1px solid rgba(46, 183, 201, 0.2);
            }
          }
        }
        .comfort {
          font-size: 15px;
          color: rgba(0, 0, 0, 0.87);
          letter-spacing: 3.75px;
          text-align: center;
          line-height: 18px;
          margin-top: 80px;
        }
        .slider-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 45px;
          .strength {
            font-size: 12px;
            color: #959eb0;
            letter-spacing: 0.6px;
            text-align: center;
            line-height: 12px;
          }
          .slider-outer {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
            width: 303px;
            height: 40px;
            border-radius: 24px;
            background: rgba(240, 243, 249, 0.6);
            box-shadow: inset -10px -10px 20px 0 rgba(255, 255, 255, 0.8),
              inset 10px 10px 20px 0 rgba(0, 0, 0, 0.2);
            border-radius: 24px;
            .bg {
              width: 264px;
              height: 4px;
              // opacity: 0.2;
              background: rgb(179, 189, 207);
              border-radius: 3px;
              position: relative;
              .left {
                position: absolute;
                width: 87px;
                height: 4px;
                border-radius: 3px;
                background: #e3e6ec;
                background-image: linear-gradient(
                  270deg,
                  rgba(47, 185, 202, 0.97) 0%,
                  rgba(67, 216, 205, 0.6) 100%
                );
              }
            }
            .thumb {
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 28px;
              height: 28px;
              left: 80px;
              top: 6px;
              border-radius: 14px;
              background: #ffffff;
              background-image: linear-gradient(
                179deg,
                rgba(255, 255, 255, 0) 0%,
                #e9e8f7 100%
              );
              box-shadow: 0 10px 30px 0 rgba(163, 176, 202, 0.2);
              .thumb-inner {
                width: 6px;
                height: 6px;
                background: #e3e6ec;
                border-radius: 3px;
                background-image: linear-gradient(
                  180deg,
                  rgba(47, 185, 202, 0.97) 0%,
                  rgba(67, 216, 205, 0.6) 100%
                );
              }
            }
          }
          .number {
            width: 256px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            .number-text {
              font-size: 12px;
              color: #959eb0;
              letter-spacing: 0;
              text-align: center;
              line-height: 12px;
            }
          }
        }
        .button-container {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 37px;
          .pause {
            margin-right: 50px;
          }
          .button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background: #e3e6ec;
            box-shadow: -10px -10px 30px 0 #ffffff,
              10px 10px 30px 0 rgba(166, 174, 189, 0.6);
            .iconfont {
              font-size: 24px;
              color: #000;
            }
          }
        }
      }
    }
  }